import React, { useCallback, useState } from 'react';
import lunisolar from 'lunisolar'
import './cld.scss'
import Tanclb from './Tanclb/Tanclb';

function Cld() {
    // 月
    const [moth, setMoth] = useState(new Date().getMonth() + 1)
    //日
    const [day, setDay] = useState(new Date().getDate())
    //年
    const [year, setYear] = useState(new Date().getFullYear())
    //星期
    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const now1 = new Date();
    const day1 = days[now1.getDay()];

    // 获取农历
    const d = lunisolar(now1)
    // 控制日历显示隐藏
    const [showTanclb, setShowTanclb] = useState('none')

    const OverTanclb = useCallback(() => {
        setShowTanclb('block')
    }, [showTanclb])

    const OutTanclb = useCallback(() => {
        setShowTanclb('none')
    }, [showTanclb])
    return (
        <div className='calendar-box' onMouseOver={OverTanclb} onMouseOut={OutTanclb}>
            <div className='Tanclb-module' style={{ display: `${showTanclb}`, width: '1000px', height: '800px' }} >
                <Tanclb></Tanclb>
            </div>

            <div className='calendar-Left'>
                <div className='calendar-Left-Item-Top'>
                    <span className='calendar-Left-Item-Top-day'>{day}</span>
                    <span>/{moth}</span>
                    <span>&nbsp;&nbsp;{year}</span>
                </div>
                <div className='calendar-Left-Item-Bootom'>{day1} 农历{d.format('lMlD')}</div>
            </div>
            <div className='calendar-Right'><img src="https://asset.eqh5.com//mall/manager/public/fOywGeOPXzahzyU.png" alt="" />世界无烟日</div>

        </div>
    )
}

export default Cld
